<template>
    <div class="tag-wrapper" >
        <TagCloud class="tags" :tags="tags" width="300" height="250" radius="100" @click="goToDetail"></TagCloud>
		<BlogDivider/>
		<BlogComment></BlogComment>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElLoading } from 'element-plus';

import TagCloud from '@/components/TagCloud.vue'
import type { Tag } from '@/components/TagCloud.vue'
import BlogDivider from '@/components/BlogDivider.vue';
import BlogComment from '@/components/BlogComment.vue';
import tagsApi from '@/api/tags.js';
import { useGlobalStore } from '@/stores/global';

const globalStore = useGlobalStore();

const router = useRouter();
let tags = ref<Tag[]>([]);

onMounted(() => {
	const loading = ElLoading.service({
		target: '.tags',
		text: 'Loading',
		background: 'rgba(0, 0, 0, 0.01)'
	})
	tagsApi.getList().then((result) => {
		setTimeout(() => {
			loading.close()
		}, 2000)
		const data = result.data;
		let tagsTmp: Tag[] = [];
		for (let i = 0; i < data.length; i++) {
			const element = data[i];
			let tagTmp: Tag = {
				id: element.id,
                name: element.name,
                color: element.color || '#000000', // 默认颜色
				date: element.date
            };
			tagsTmp.push(tagTmp)
		}
		tags.value = tagsTmp;
		console.log('tagsTmp: ', tags);
		
	}).catch(e => {
		loading.close()
		ElMessage.error(e.message)
	})
})

const goToDetail = async (item: Tag) => {
    const navigationResult = await router.push({name: 'tags-detail', params:{id: item.id}});
    if (!navigationResult) { // 路由跳转成功
        globalStore.updateNavTitle(item.name);
    }
}

</script>

<style lang="scss" scoped>

.tag-wrapper {
    // background-color: orange;
    padding: 20px;
	@include border;
	@include box-shadow;
	.tags {
		margin: 0 auto;
		// background-color: orange
	}
}

</style>